<template>
  <div class="container">
    <transition name="fade">
      <div class="details"  v-if="detailState">
        <div class="detailsbox">
          <div class="details-logobox">
            <img v-if="!lineData" :src="getBrandUrl(evalDetail[0].text)?getBrandUrl(evalDetail[0].text):require('../styles/asset/other.jpg')" alt="" />
            <img v-if="lineData" :src="getBrandUrl(detail.brandName)?getBrandUrl(detail.brandName):require('../styles/asset/other.jpg')" alt="" />
          </div>
          <h1 v-if="!lineData" class="details-title" v-text="evalDetail[0].text"></h1>
          <h1 v-if="lineData" class="details-title" v-text="detail.brandName"></h1>
        </div>
        <div class="estimate" v-if="!lineData">
          <h2 class="estimate-title">评估详情：</h2>
          <ul>
            <li v-text="evalDetail[1].text"></li>
            <li v-text="evalDetail[2].text"></li>
            <li v-text="evalDetail[3].text"></li>
            <li v-text="evalDetail[4].text"></li>
          </ul>
        </div>
        <div class="recyclingInfo-box" v-if="!lineData">
          <h2 class="recyclingInfo-title">用户信息：</h2>
          <div class="recyclingInfo">
            <span class="uname">{{ detail.linkName }}</span>
            <span class="uphone">{{ detail.linkPhone }}</span>
            <p class="uarea">{{ detail.linkAddr }}</p>
          </div>
        </div>
        <div class="estimate-list">
          <ul>
            <li >订单号：<span>{{ detail.orderNum }}</span></li>
            <li >申请时间：<span>{{ detail.applyTime }}</span></li>
            <li >订单状态：<span>{{ detail.state }}</span></li>
            <li v-if="detail.evalAmount">评估参考价：<span style="color: #ff5555">{{ detail.evalAmount }}元</span></li>
            <li v-show="detail.state == '回收失败'">失败原因：<span>{{ detail.cancelReason  }}</span></li>
            <li v-show="detail.state == '已完成'">成交方式：<span>{{ detail.convertAmount  }}元余额</span></li>
          </ul>
        </div>
      </div>
    </transition>
    <transition name="fade">
      <div v-if="!detailState" class="box_bg">
      </div>
    </transition>
  </div>
</template>

<script>
  let filters = {
    selected:function(options,text) {
      let url = '';
      options.forEach(function (e, index) {
        if (e.text === text) {
          url = e.linkurl
        }
      })
      return url;
    },
    parseURL:function(url) {
      let a = document.createElement('a');
      a.href = url;
      return {
        params: (function () {
          let ret = {},
            param = a.href.split('?')[1],
            seg = param.split('&'),
            len = seg.length,
            i = 0,
            s;
          for (; i < len; i++) {
            if (!seg[i]) {
              continue;
            }
            s = seg[i].split('=');
            ret[s[0]] = s[1];
          }
          return ret;
        })()
      }
    }
  }
  export default {
    data () {
      return {
        detail:{},
        orderId:"",
        state: true,
        detailState: true,
        evalDetail:[{text:''},{text:''},{text:''},{text:''},{text:''},{text:''}],
        lineData: false,
        token:"",
        options:[
          {text:"小刀",value:0,selected:false,linkurl:require('../styles/asset/logoxd.jpg')},
          {text:"爱玛",value:0,selected:false,linkurl:require('../styles/asset/logoam.jpg')},
          {text:"雅迪",value:0,selected:false,linkurl:require('../styles/asset/logoyd.jpg')},
          {text:"新日",value:0,selected:false,linkurl:require('../styles/asset/logoxr.jpg')},
          {text:"绿源",value:0,selected:false,linkurl:require('../styles/asset/logoly.jpg')},
          {text:"新大洲",value:0,selected:false,linkurl:require('../styles/asset/logoxdz.jpg')},
          {text:"速派奇",value:0,selected:false,linkurl:require('../styles/asset/logospq.jpg')},
          {text:"台铃",value:0,selected:false,linkurl:require('../styles/asset/logotl.jpg')},
          {text:"小鸟",value:0,selected:false,linkurl:require('../styles/asset/logoxn.jpg')},
          {text:"比德文",value:0,selected:false,linkurl:require('../styles/asset/logobdw.jpg')},
          {text:"洪都",value:0,selected:false,linkurl:require('../styles/asset/logohd.jpg')},
          {text:"宝岛",value:0,selected:false,linkurl:require('../styles/asset/logobd.jpg')},
          {text:"立马",value:0,selected:false,linkurl:require('../styles/asset/logolm.jpg')},
          {text:"其他品牌",value:0,selected:false,linkurl:false}
        ],
      }
    },
    mounted(){
      const that = this;
      const url = window.location.href;
      this.orderId = filters.parseURL(url).params.orderId;
      this.$util.getUserToken().then(token=>{
        that.token = token;
        that.geteOrderDetail();
      })
    },
    computed:{

    },
    methods: {
      getBrandUrl:function(text){
        return filters.selected(this.options,text)
      },
      geteOrderDetail(){
        this.$api.post('/reclaim/v1/authApi/reclaimDetail?orderId='+this.orderId ,{},s=>{
          this.detail = s.module;
          if (s.module.evalDetail !== null) {
            this.evalDetail = JSON.parse(s.module.evalDetail);
          } else {
            this.evalDetail = s.module.evalDetail = '';
            this.lineData = true;
          }
          if(!this.detail)
          {
            this.detailState = false;
          }

        },f=>{
          //alert(f.errorMessage)
        },{
          "token": this.token
        })
      },
    }
  };
</script>

<style scoped>
  @import "../styles/styles.css";

  .container {  height: 100%;  background-color: #F5F5F5; overflow-y: scroll;}
  div,span {  margin:0;  padding: 0;  }
  input{  background:none;  outline:none;  border:0px;  -webkit-appearance: none;  }
  .box_bg { margin:0 auto; width: 70%;  height:100%;  background: url("../styles/asset/no-detail-bg.png") no-repeat center center;  background-size: contain;  }
  .details {  width: 100%;  height: 100%; overflow-y: scroll;  font-size: 14px;  }
  .details .detailsbox {  text-align: center;  padding-bottom: 0.21rem;  background:#48a298 url("../styles/asset/detail.png") no-repeat bottom center;  background-size: 100%;  }
  .details .details-logobox {  width: 100%;  }
  .details img {  width: 20%;  box-sizing: border-box;  margin: 0.4rem 0 0 0;  border-radius: 0.1rem;}
  .details .details-title {  font-size: 18px;  margin: 3% 0 0 0; color: #fff; }
  .details .estimate {  margin-top: 0.2rem;  background: #ffffff;  overflow: hidden;}
  .details .estimate-title {  padding: 0.2rem;  font-size: 14px;  border-top: 1px solid #f5f5f5;  border-bottom: 1px solid #f5f5f5;  }
  .details .estimate ul {  width: 100%;  font-size: 14px;  border-bottom: 1px solid #f5f5f5;  padding-top:0.2rem;}
  .details .estimate ul li {  padding: 0.2rem;  margin: 0 0 0.2rem 0.2rem;  display: inline-block;  border: 1px solid #f5f5f5;  border-radius: 0.1rem;  }
  .details .estimate-list {  background:#ffffff;  margin: 0.2rem 0;  overflow: hidden; }

  .details .recyclingInfo-box {  margin-top: 0.2rem;  background: #ffffff; font-size:14px;  }
  .details .recyclingInfo-title{ padding: 0.2rem  0 0.2rem 0.2rem;font-size: 14px;  border-bottom: 1px solid #f5f5f5; }
  .details .recyclingInfo {  padding: 0.2rem; font-size:14px;  }
  .details .uname {  display: inline-block; text-align: left;  }
  .details span {  margin-bottom: 0.04rem;  }
  .details .uphone {  display: inline-block; margin-left: 0.4rem; }
  .details .uarea {  font-size: 14px; padding-top: 0.08rem; }
  .details .estimate-list li {  padding: 0.2rem 0 0.2rem 0.2rem;  font-size: 14px;  color: #333;  width: 100%;  font-weight: bold;  border-bottom: 1px solid #f5f5f5;  }
  .details .estimate-list li span {  float: right;  font-weight: normal;  padding-right: 0.2rem;  color: #666666;  }

  .fade-enter-active {  transition: all .5s ease;  }
  .fade-enter, .slide-fade-leave-active {  transform: translateY(-20%);  opacity: 0;  }

</style>


